<template lang="html">
  <div class="indep-notice-bar" v-if="show">
    <img class="indep-notice-bar__warning" src="https://mjmh.meijiameihuo.com/wechat/images/icon/notice-bar-warning.png" alt="">
    <div class="indep-notice-bar__text"  @click="_gotoLink">
      <span v-if="title">{{title}}</span>
      <slot v-else></slot>
    </div>
    <img class="indep-notice-bar__close" @click="_onHidden" src="https://mjmh.meijiameihuo.com/wechat/images/icon/notice-bar-close.png" alt="">
  </div>
</template>

<script>

export default {
  props: {
    title: String,
    link: String,
    closeable: {
      type: Boolean,
      value: true
    }
  },
  data () {
    return {
      show: true
    }
  },
  created () {
    console.log(this.$route)
  },
  methods: {
    _gotoLink () {
      console.log()
      if (this.link) {
        // this.$route.navigateTo({ url: event.currentTarget.dataset.link })
      }
    },
    _onShow () {
      this.show = true
    },
    _onHidden () {
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.indep-notice-bar {
  position: relative;
  background: #FDF7ED;
  padding: 4px 35px;
}

.indep-notice-bar__warning {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}

.indep-notice-bar__text {
  min-height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #CB9956;
  font-family: sans-serif;
}

.indep-notice-bar__close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}
</style>
